<template>
    <div class="ArticleDialog">
        <el-dialog
            :title="dialogType === 0 ? '新增文章' : '修改文章'"
            :visible="value"
            @close="close"
            width="800px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label-width="78px" label="文章标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
                </el-form-item>
                <el-form-item label-width="78px" label="文章内容" prop="articleBody" class="is-required">
                    <quill-editor v-model="form.articleBody" :options="editorOption" @blur="$refs.form.validateField('articleBody')"></quill-editor>
                </el-form-item>
                <el-form-item label-width="78px" label="视频地址">
                    <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
                </el-form-item>
                <el-form-item label-width="78px">
                    <el-button size="small" @click="close">取消</el-button>
                    <el-button size="small" type="primary" @click="submit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { addArticleItem, editArticleItem, getArticleItem } from '@/api/hmmm/articles'

export default {
    name: 'ArticleDialog',
    props: {
        value: Boolean,
        currentID: {
            required: false,
            type: Number
        },
        dialogType: Number
    },
    data () {
        return {
            form: {},
            rules: {
                title: [
                    { required: true, message: '请选择标题', trigger: 'blur' }
                ],
                articleBody: [
                    { validator: (rule, value, callback) => {
                            const node = document.querySelector('.quill-editor')
                            if (!this.form.articleBody) {
                                node.classList.add('error-form')
                                return callback(new Error())
                            } else {
                                node.classList.remove('error-form')
                                return callback()
                            }
                        }, message: '请输入文章内容', trigger: 'blur'
                    }
                ]
            },
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
                        ['blockquote', 'code-block'], //引用，代码块
                        [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
                        [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                        [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                        [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                        [{ 'align': [] }] //对齐方式
                    ]
                },
                placeholder: ''
            }
        }
    },
    methods: {
        async render () {
            const res = await getArticleItem({
                id: this.currentID
            })
            this.form = res.data
        },
        close () {
            this.form = {}
            document.querySelector('.quill-editor').classList.remove('error-form')
            this.$refs.form.resetFields()
            this.$emit('input', false)
        },
        submit () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    if (this.dialogType === 0) {
                        const res = await editArticleItem({
                            id: this.currentID,
                            ...this.form
                        })
                        if (res.data.success) this.$message.success('修改成功')
                    } else {
                        const res = await addArticleItem({
                            id: this.currentID,
                            ...this.form
                        })
                        if (res.data.id) this.$message.success('添加成功')
                    }
                    this.form = {}
                    this.$refs.form.resetFields()
                    this.$emit('reload')
                    this.$emit('input', false)
                }
            })
        }
    },
    watch: {
        value(val) {
            if (val && this.dialogType === 0) this.render()
        }
    }
}
</script>

<style scoped lang="scss">
.ArticleDialog {
    ::v-deep .el-dialog {
        .el-dialog__body {
            .el-form {
                .el-form-item:nth-of-type(4) {
                    margin: 0;
                    .el-form-item__content {
                        text-align: right;
                    }
                }
            }

            .quill-editor {
                .ql-editor {
                    height: 40vh;
                    overflow: auto;
                }

                > div {
                    border: 1px solid #DCDFE6;
                }

                div:first-of-type {
                    border-radius: 4px 4px 0 0;
                }

                div:last-of-type {
                    border-radius: 0 0 4px 4px;
                    border-top: none;
                }
            }

            .error-form {
                > div {
                    border: 1px solid #F56C6C;
                }
            }
        }
    }
}
</style>
